<div>
    <div class="layui-inline">
        <input class="layui-input" name="keyword" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
    <table id="patientTable" lay-filter="patientTable">
    </table>
</div>
<!--<script type="text/html" id="toolbarDemo">-->
<!--    <div class="layui-btn-container">-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="addpatient1">添加患者</button>-->
<!--    </div>-->
<!--</script>-->
<div class="site-text" style="margin: 5%; display: none" id="window1">
    <form class="layui-form" id="update1" lay-filter="update1">
        <div class="layui-form-item">
            <label class="layui-form-label">患病</label>
            <div class="layui-input-block">
                <input type="text" id="disease1" name="disease1" autocomplete="off" placeholder="请输入患病"
                       class="layui-input">
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改患病信息</a>
</script>
<div class="site-text" style="margin: 5%; display: none" id="window2">
    <form class="layui-form" id="addpatient" lay-filter="addpatient">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="patientName" name="patientName" autocomplete="off" placeholder="请输入用户名   "
                       class="layui-input">
            </div>
            <br> <br>
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" id="password" name="password" autocomplete="off" placeholder="请输入密码"
                       class="layui-input">
            </div>
            <br> <br>
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-block">
                <input type="text" id="anoName" name="anoName" autocomplete="off" placeholder="请输入真实姓名"
                       class="layui-input">
            </div>
            <br> <br>
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" id="age" name="age" autocomplete="off" placeholder="请输入年龄"
                       class="layui-input">
            </div>
            <br> <br>
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" id="gender" name="gender" autocomplete="off" placeholder="请输入性别"
                       class="layui-input">
            </div>
            <br> <br>
            <label class="layui-form-label">患病</label>
            <div class="layui-input-block">
                <input type="text" id="disease" name="disease" autocomplete="off" placeholder="请输入患者的患病"
                       class="layui-input">
            </div>
            <br> <br>
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <input type="text" id="ptype" name="ptype" autocomplete="off" placeholder="请输入患者的患病"
                       class="layui-input">
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table;
        var $ = layui.jquery
        var form = layui.form
        table.render({
            elem: '#patientTable'
            , height: 600
            , url: '/patient/all' //数据接口
            , page: true //开启分页
            , toolbar: '#toolbarDemo'
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}
                , {field: 'patientName', title: '患者用户名', width: 140}
                , {field: 'age', title: '年龄', width: 70}
                , {field: 'gender', title: '性别', width: 60}
                , {field: 'anoName', title: '患者姓名', width: 100}
                , {field: 'addTime', title: '添加时间', width: 180}
                , {field: 'disease', title: '患病', width: 150}
                , {field: 'ptype', title: '类型', width: 100}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 240}
            ]]
        });
        table.on('tool(patientTable)', function (obj) {
            var data = obj.data
            if (obj.event === 'update') {
                form.val("update1", {
                    "disease1": data.disease
                });
                layer.open({
                    type: 1
                    , content: $("#window1")
                    , btn: '确定'
                    , btnAlign: 'c' //按钮居中
                    , area: ['500px', '500px']
                    , shade: 0 //不显示遮罩
                    , yes: function () {
                        var data1 = form.val("update1");
                        var postdata = {
                            "disease": data1.disease1
                        }
                        $.ajax({
                            type: "POST",
                            url: "/patient/update?patientName=" + data.patientName,
                            contentType: "application/json",
                            data: JSON.stringify(postdata),
                            success: function (data) {
                                document.getElementById("update1").reset();
                                table.render({
                                    elem: '#patientTable'
                                    , height: 600
                                    , url: '/patient/all' //数据接口
                                    , page: true //开启分页
                                    , toolbar: '#toolbarDemo'
                                    , cols: [[ //表头
                                        {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}
                                        , {field: 'patientName', title: '患者用户名', width: 140}
                                        , {field: 'age', title: '年龄', width: 70}
                                        , {field: 'gender', title: '性别', width: 60}
                                        , {field: 'anoName', title: '患者姓名', width: 100}
                                        , {field: 'addTime', title: '添加时间', width: 180}
                                        , {field: 'disease', title: '患病', width: 150}
                                        , {field: 'ptype', title: '类型', width: 100}
                                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 240}
                                    ]]
                                });
                            },
                        })

                        //data是默认值
                        layer.closeAll();

                    }
                });

            }
        });
        $('.layui-btn').click(function () {
            var inputVal = $('.layui-input').val()
            table.render({
                elem: '#patientTable'
                , height: 600
                , url: '/patient/search?patientName=' + inputVal//数据接口
                , toolbar: '#toolbarDemo'
                , cols: [[ //表头
                    {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}
                    , {field: 'patientName', title: '患者用户名', width: 140}
                    , {field: 'age', title: '年龄', width: 70}
                    , {field: 'gender', title: '性别', width: 60}
                    , {field: 'anoName', title: '患者姓名', width: 100}
                    , {field: 'addTime', title: '添加时间', width: 180}
                    , {field: 'disease', title: '患病', width: 150}
                    , {field: 'ptype', title: '类型', width: 100}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 240}
                ]]
            });
        })

    })
</script>